<template>
  <div>
    <h1 style="text-align: center;">地区树形结构</h1>
    <el-tree
      :data="regionData"
      :props="defaultProps"
      show-checkbox
      align="center"
      node-key="id"
      :default-expand-all="true"
      @node-click="handleNodeClick"
    />
  </div>
</template>

<script>

import axios from 'axios'

export default {
  name: 'C',
  data() {
    return {
      regionData: [
      ],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  // 如果您打算从API获取数据，您可以将数据获取逻辑放在created或mounted钩子中
  created() {
    this.fetchRegionData()
  },
  methods: {
    fetchRegionData() {
      axios.get('http://127.0.0.1:9090/region')
        .then(response => {
          this.regionData = response.data.data // 假设API直接返回了地区数组
          console.log('hell world', this.regionData)
        })
        .catch(error => {
          console.error('Failed to fetch region data:', error)
        })
    },
    handleNodeClick(data, node, component) {
      console.log('Clicked node:', data)
    }
  }
}
</script>

<style>
</style>

<!--不仅仅可以查看pom文件中依赖 还可以查看所有的依赖 controller vue 基本上所有页面中的依赖都可以查看到-->
